<script setup lang="ts">
import { NConfigProvider, zhCN, dateZhCN, darkTheme } from 'naive-ui'
import { LanguageFilled } from '@vicons/material'
import { useSystemStore, formatLang } from '@/stores'
import { computed } from 'vue';
import { DropdownMixedOption } from 'naive-ui/es/dropdown/src/interface';
import { Icon } from '@vicons/utils'
import { getModules } from '@/routes'
import { MenuMixedOption } from 'naive-ui/es/menu/src/interface';
import { RouterLink } from 'vue-router';
import { h } from 'vue';
import TestWorker from './worker?worker'
const testWorker = new TestWorker()
testWorker.postMessage("卧槽")
const systemInfo = useSystemStore()

const LangsOptions = computed<DropdownMixedOption[]>(() => {
  return systemInfo.languages.filter(i => i.includes('-')).map(i => {
    const v = formatLang(i)
    return { label: v, key: v }
  }).filter(Boolean)
})
function handleSelect(v: string) {
  systemInfo.language = (v)
}


const menusKeys = Object.keys(getModules()).map<MenuMixedOption>((key => ({ key, label: () => h(RouterLink, { to: { path: key } }, { default: () => key }) })))

</script>

<template>
  <NConfigProvider :theme="systemInfo.darkMod ? darkTheme : void 0" :locale="zhCN" :date-locale="dateZhCN">
    <NLayout has-sider>
      <NLayoutSider show-trigger>
        <NMenu :options="menusKeys" />
      </NLayoutSider>
      <NLayout>

        <NLayoutHeader bordered>
          <NDropdown :options="LangsOptions" @select="handleSelect">
            <Icon size="20">
              <LanguageFilled />
            </Icon>
          </NDropdown>
        </NLayoutHeader>
        <NLayoutContent>
          <RouterView />
        </NLayoutContent>
        <NLayoutFooter>
          诶?
        </NLayoutFooter>

      </NLayout>
    </NLayout>
  </NConfigProvider>
</template>

<style >
.n-layout-header {
  display: flex;
  justify-content: flex-end;
  padding-inline: 1em;
}

.n-layout-scroll-container .n-scrollbar-content{
  height: 100%;
}
.n-layout-scroll-container {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.n-layout-content {
  flex: 1;
}
</style>
